import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import  Quick.UIComponent.TabBar.CustomTab  0.1


Page{
    id:root
    title: "Tabs"


    header:TabBar {
          id: bar1
          width: parent.width

          TabButton {
              text: qsTr("Home")
          }
          TabButton {
              text: qsTr("Discover")
          }
          TabButton {
              text: qsTr("Activity")
          }
      }
    footer: TabBar {
          id: bar
          width: parent.width
          height: 60
          currentIndex: 0
          //position:TabBar.Header

          ListModel {
              id: myModel
              ListElement { modelText: "消息"; modelSrc: "qrc:/image/icons/error.svg"; modelSrcG: "qrc:/image/icons/Quit.svg";}
              ListElement { modelText: "联系人"; modelSrc: "qrc:/image/icons/hide.svg"; modelSrcG: "qrc:/image/icons/Quit.svg";}
              ListElement { modelText: "发现"; modelSrc: "qrc:/image/icons/menu.svg"; modelSrcG: "qrc:/image/icons/Quit.svg";}
              ListElement { modelText: "我"; modelSrc: "qrc:/image/icons/open.svg"; modelSrcG: "qrc:/image/icons/Quit.svg";}
          }

          Repeater {
              model: myModel

              TabButton {
                  height: bar.height
                  background:ColumnLayout{
                      anchors.fill: parent
                      Image{
                          Layout.preferredHeight: 24
                          Layout.preferredWidth: 24
                          Layout.alignment: Qt.AlignHCenter
                          source: (model.index === bar.currentIndex) ? modelSrcG : modelSrc
                      }
                      Label {
                          id: name
                          Layout.alignment: Qt.AlignHCenter
//                          verticalAlignment: Text.AlignBottom
                          text: modelText
                          color: (model.index === bar.currentIndex) ? "#148014" : "#000000"
                      }
                  }
              }
          }
      }

    CustomTab{
        id:custom
        model:["AS","CN","EN","Korean"]
    }

    Button{
        y:100
        onClicked: {
            console.log(custom.currentIndex)
            console.log(custom.displayText)
        }
    }



//      StackLayout {
//          width: parent.width
//          currentIndex: bar1.currentIndex
//          Item {
//              id: homeTab
//          }
//          Item {
//              id: discoverTab
//          }
//          Item {
//              id: activityTab
//          }
//      }

}
